<template>
  <view class="min-h-[100vh] bg-[var(--page-bg-color)]  overflow-hidden" :style="themeColor()">
    <view class="fixed left-0 right-0 top-0 z-99">
      <!-- <view class="flex items-center order-bg-wrap p-[40rpx]">
        <view class="flex flex-col">
          <view class="flex items-center">
            <text class="truncate max-w-[380rpx] text-[#fff] font-500 mr-[10rpx] text-[30rpx]">
              累计推广订单:1
            </text>

          </view>

        </view>
      </view> -->
      <view class="tab-style-3 pt-[4rpx] bg-[#fff]">
        <view class="tab-items"
          :class="{ '!text-primary class-select': fromType.account_data_gt === item.account_data_gt }"
          v-for="(item, index) in accountTypeList" :key="index" @click="fromTypeFn(item, index)">{{ item.name }}
        </view>

      </view>
    </view>
    <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="{ use: false }" @up="getListFn" top="100rpx">
      <view class="pt-[var(--top-m)] body-bottom" v-if="list.length">
        <view v-for="(item, index) in list" :key="item.id"
          class="sidebar-margin mb-[var(--top-m)] card-template relative">
          <view class="flex items-center justify-between mb-[20rpx]">
            <view class="text-[28rpx] font-500 text-[#333] leading-[40rpx]">订单编号:{{ item.bizId }}</view>
            <view class="text-[24rpx] text-[var(--text-color-light6)] ">{{ item.status === 0 ? '待结算' :
              item.status
                === 1 ? '已结算' : '已取消' }}</view>

          </view>
          <view class="flex items-center justify-between mb-[20rpx]">
            <view class="text-[28rpx] font-500 text-[#333] leading-[40rpx]">{{ item.title }}</view>
            <view class=" text-[36rpx] font-500 text-[#03B521] leading-[50rpx] price-font"
              :class="{ '!text-[var(--price-text-color)]': item.price > 0 }">{{ item.price > 0 ? '+' +
                fen2yuan(item.price) : fen2yuan(item.price) }}</view>
          </view>
          <view class="text-[24rpx] text-[var(--text-color-light6)] mb-[14rpx]" v-if="item.memo">{{ item.memo }}</view>
          <view class="text-[24rpx] text-[var(--text-color-light6)]">
            {{ timeFormat(item.createTime, 'yyyy-mm-dd hh: MM: ss') }}</view>
        </view>
      </view>
      <mescroll-empty :option="{ tip: tip }" v-if="!list.length && loading"></mescroll-empty>
    </mescroll-body>

  </view>
</template>

<script setup lang="ts">
import { ref, nextTick, reactive } from 'vue'
import { t } from '@/locale'
import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
import { getBrokerageRecordPage as getCommissionList } from './../api/commission'
import { onPageScroll, onReachBottom, onLoad, onShow } from '@dcloudio/uni-app';
import { fen2yuan, timeFormat } from '@/utils/formatting';

const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);

const type = ref('')
const tip = ref('')

onLoad((options: any) => {

});

const create_time = ref([])
//来源类型
const fromType = ref({
  account_data_gt: ''
})
const accountTypeList = ref([
  { name: '全部', account_data_gt: '' },
  { name: '待结算', account_data_gt: '1' },
  { name: '已结算', account_data_gt: '2' },
])
const list = ref<Array<any>>([]),
  loading = ref<boolean>(false),
  mescrollRef = ref(null);

interface mescrollStructure {
  num: number,
  size: number,
  endSuccess: Function,
  [propName: string]: any
}

const getListFn = (mescroll: mescrollStructure) => {
  loading.value = false;
  let data: Object = {
    pageNo: mescroll.num,
    // pageSize: mescroll.size,
    pageSize: 1,
    createTime: create_time.value,
    bizType: 1,
    status: fromType.value.account_data_gt != '' ? fromType.value.account_data_gt : undefined

  };


  let fnList: any = (params: any) => { };
  fnList = getCommissionList;

  fnList(data).then((res: any) => {
    let newArr = res.data.list;
    mescroll.endSuccess(newArr.length);
    //设置列表数据
    if (mescroll.num == 1) {
      list.value = []; //如果是第一页需手动制空列表
    }
    list.value = list.value.concat(newArr);
    loading.value = true;
  }).catch(() => {
    loading.value = true;
    mescroll.endErr(); // 请求失败, 结束加载
  })
}


// 类型搜索
const fromTypeFn = (data: any, index: number) => {
  fromType.value.account_data_gt = data.account_data_gt
  list.value = []
  getMescroll().resetUpScroll();
}



</script>

<style lang="scss">
.body-bottom {
  padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}

.order-bg-wrap {
  background: linear-gradient(to right, var(--primary-color) 40%, var(--primary-color-dark) 90%);
}
</style>
